<template>
  <div>
    <div class="wb-main">
      <div class="wb-main-btn">
        <el-button type="primary" size="mini" @click="addLine">新增</el-button>
      </div>
      <div class="wb-table-wrap">
        <el-table
          class="wb-table"
          border
          :v-loading="loading"
          :data="dataSource"
        >
          <el-table-column label="序号" type="index" width="90px" />
          <el-table-column label="路线名" prop="name" />
          <el-table-column label="负责人" prop="leader" show-overflow-tooltip />
          <el-table-column label="区域" prop="scopeData" show-overflow-tooltip />
          <el-table-column
            label="状态"
          >
            <template slot-scope="{row}">
              <span>{{ row.status?"启用":"禁用" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
          >
            <template slot-scope="{row}">
              <el-button type="text" style="fontSize:14px" size="small" @click="modifyBtn(row)">修改</el-button>

              <el-button type="text" style="fontSize:14px" size="small" @click="deleteBtn(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>

      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <div>
          <el-form ref="lineform" :model="formData" :rules="rules" label-width="120px">
            <el-form-item label="路线名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入路线名称" style="width:200px" />
            </el-form-item>

            <el-form-item label="负责人" prop="leaderId">
              <el-select
                v-model="formData.leaderId"
                placeholder="请选择负责人"
                clearable
                style="width:200px"
              >
                <el-option
                  v-for="item in roleList"
                  :key="item.id + 'role'"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="负责范围" prop="scope">
              <el-select
                v-model="formData.scope"
                style="width:200px"
                placeholder="请选择负责范围"
                multiple
                clearable
              >
                <el-option
                  v-for="item in regionList"
                  :key="item.id + 'role'"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="状态" prop="status">
              <el-select
                v-model="formData.status"
                style="width:200px"
                placeholder="请选择负责范围"
                clearable
              >
                <el-option
                  v-for="item in stateList"
                  :key="item.id + 'state'"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogBtn">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pathApi from '@/api/path'
import { usersByRole } from '@/api/customer'

export default {
  data() {
    return {
      dataSource: [],
      loading: false,
      dialogTitle: '新增路线',
      dialogVisible: false,
      regionList: [],
      roleList: [],
      formData: {
        name: '',
        leaderId: '',
        scope: '',
        status: null
      },
      stateList: [
        {
          name: '启用',
          id: true
        },
        {
          name: '禁用',
          id: false
        }
      ],
      rules: {
        name: {
          required: true, message: '请输入路线名', trigger: 'change'
        },
        leaderId: {
          required: true, message: '请选择负责人', trigger: 'change'
        },
        scope: {
          required: true, message: '请选择负责范围', trigger: 'change'
        },
        status: {
          required: true, message: '请设置路线状态', trigger: 'change'
        }
      }
    }
  },
  mounted() {
    this.getListData()
    this.regionLineScope()
    this.getUsersByRole()
  },
  methods: {
    getUsersByRole() {
      usersByRole(4).then((res) => {
        const roleList = res.data
        roleList.forEach((item) => {
          item.id = Number(item.id)
        })
        this.roleList = roleList
      })
    },
    regionLineScope() {
      pathApi.regionLineScope().then((res) => {
        this.regionList = res.data
      })
    },
    getListData() {
      this.loading = true
      pathApi.lineList().then((res) => {
        this.loading = false
        this.dataSource = res.data
      }).catch(() => {
        this.loading = false
      })
    },
    modifyBtn(row) {
      this.formData = {
        ...row,
        scope: row.scope.split(',')
      }
      this.dialogTitle = '修改路线'
      console.log('row----->', this.formData)
      this.$nextTick(() => {
        this.$refs.lineform.clearValidate()
      })
      this.dialogVisible = true
    },
    addLine() {
      this.formData = {
        name: '',
        leaderId: '',
        scope: '',
        status: null
      }
      this.$nextTick(() => {
        this.$refs.lineform.clearValidate()
      })

      this.dialogVisible = true
    },
    deleteBtn(row) {
      this.$confirm('此操作将永久删除该路线, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        pathApi.deleteByLineId(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getListData()
        })
      })
    },
    dialogBtn() {
      this.$refs.lineform.validate((valid) => {
        if (valid) {
          pathApi.createLine(this.formData).then(() => {
            if (this.dialogTitle === '修改路线') {
              this.$message.success('修改成功')
            } else {
              this.$message.success('新增成功')
            }
            this.dialogVisible = false
            this.getListData()
          })
        }
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.wb-main-btn {
  text-align: right;
}
</style>
